<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../css/common/reset.css">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/editAddress.css">
</head>

<body style="background: #fff;">
    <form class="layui-form editAddress">
        <div class="layui-form-item">
            <label class="layui-form-label">掌柜号：</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请填写店铺名称" id="shopName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发货人：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请填写发货人" value="" id="shopShipperName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发货人电话：</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入电话号码" value="" id="shopShipperTel" autocomplete="off" class="layui-input"
                    lay-verify="required|phone">
            </div>
        </div>
        <div class="layui-form-item" id="hideArea">
            <label class="layui-form-label">选择地区</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" class="layui-input" id="disableArea">
            </div>
        </div>
        <div class="layui-form-item" id="showArea">
            <label class="layui-form-label">选择地区</label>
            <input type="hidden" id="shopShipperAddress">
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="province" lay-filter="province" style="display: none;">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" lay-filter="city">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="area" lay-filter="area">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">发货详细地址：</label>
            <div class="layui-input-block">
                <textarea name="" id="detailedAddress" placeholder="请输入发货详细地址" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" value="立即提交" class="layui-btn" lay-submit="" lay-filter="editShopInfo">
                <!-- <button type="button" class="layui-btn layui-btn-primary">返回</button> -->
            </div>
        </div>
        <p class="redColor"> 温馨提示：发货人信息会显示在快递单上，所以请如实填写。</p>
    </form>
    <script src="../../js/area.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        var areaData = Area;
        var $form;
        var form;
        var $;
        var shopInfo = JSON.parse($.cookie('shopInfo'));
        var shopInfoId = shopInfo.id;
        console.log("你是个什么", shopInfo);
        var shopName = $("#shopName").val(shopInfo.shopName);
        // console.log(shopName)
        var shopShipperName = $("#shopShipperName").val(shopInfo.shopShipperName);
        var shopShipperTel = $("#shopShipperTel").val(shopInfo.shopShipperTel);
        var shopShipperAddress = $("#disableArea").val(shopInfo.shopShipperAddress);
        var detailedAddress = $("#detailedAddress").val(shopInfo.detailedAddress);
        $("#showArea").hide();
        $("#hideArea").click(function () {
            $(this).hide();
            $("#showArea").show();
        });
        layui.use(['jquery', 'form', 'upload'], function () {
            $ = layui.jquery;
            form = layui.form;
            $form = $('form');
            upload = layui.upload;
            loadProvince();
            form.verify({
                qq: [
                    /^[\S]{6,12}$/
                    , 'qq必须6到12位，且不能出现空格'
                ]
            });
            //加载省数据
            function loadProvince() {
                var proHtml = '';
                for (var i = 0; i < areaData.length; i++) {
                    proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
                }
                //初始化省数据
                $form.find('select[name=province]').append(proHtml);
                form.render();
                form.on('select(province)', function (data) {
                    $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                    var value = data.value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if (count > 0) {
                        loadCity(areaData[index].mallCityList);
                    } else {
                        $form.find('select[name=city]').parent().hide();
                    }
                });
            }
            //加载市数据
            function loadCity(citys) {
                var cityHtml = '';
                for (var i = 0; i < citys.length; i++) {
                    cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
                }
                $form.find('select[name=city]').html(cityHtml).parent().show();
                form.render();
                form.on('select(city)', function (data) {
                    var value = data.value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if (count > 0) {
                        loadArea(citys[index].mallAreaList);
                    } else {
                        $form.find('select[name=area]').parent().hide();
                    }
                });
            }
            //加载县/区数据
            function loadArea(areas) {
                var areaHtml = '';
                for (var i = 0; i < areas.length; i++) {
                    areaHtml += '<option value="' + areas[i].areaName + '">' + areas[i].areaName + '</option>';
                }
                $form.find('select[name=area]').html(areaHtml).parent().show();
                form.render();
                form.on('select(area)', function (data) {
                    console.log(data);
                });
            }
            //监听提交
            form.on('submit(editShopInfo)', function (data) {
                var mid = $.cookie('id');
                var shopName1 = $("#shopName").val();
                console.log(shopName1)
                var shopShipperName1 = $("#shopShipperName").val();
                var shopShipperTel1 = $("#shopShipperTel").val();
                var detailedAddress1 = $("#detailedAddress").val();
                var province = $("select[name=province]").next().find("input").val();
                console.log("获取的省", province);
                var city = "," + $("select[name=city]").next().find("input").val();
                var area = "," + $("select[name=area]").val();

                console.log("区域显示", area);
                if ($("select[name=area]").val()) {
                    var shopShipperAddress1 = province + city + area;
                } else {
                    console.log("来了么")
                    var shopShipperAddress1 = $("#disableArea").val();
                }
                console.log("不能点击的地址", shopShipperAddress1);
                console.log(shopShipperAddress);
                var JdateJson = {
                    "id": shopInfoId,
                    "shopName": shopName1,
                    "shopShipperName": shopShipperName1,
                    "shopShipperTel": shopShipperTel1,
                    "shopShipperAddress": shopShipperAddress1,
                    "detailedAddress": detailedAddress1
                }
                console.log("你是对的么", JdateJson);
                // return;
                $.ajax({
                    url: 'http://47.92.174.143:8888/v1/client/shop/',
                    type: 'put',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(JdateJson),
                    success: function (data) {
                        console.log("数据是谁", data.data);
                        var _Success = data.code;
                        if (_Success == 200) {
                            layer.msg("修改成功");
                            // return;
                            var index = parent.layer.getFrameIndex(window.name);
                            setTimeout(function () {
                                parent.layer.close(index);//关闭弹出层
                                parent.location.reload();//更新父级页面（提示：如果需要跳转到其它页面见下文）
                            }, 2000);
                            // location.href = "/";
                        } else {
                            layer.msg(data.data);
                        }
                    }
                })
                //防止页面跳转
                return false;
            });
        });
    </script>
</body>

</html>